<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例</title>
    <script src="https://unpkg.com/vue@3.2.37/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
    千米 : <input type="text" v-model="kilometers" @focus="currentlyActiveField = 'kilometers'" v-copy="changeValue">
    米 : <input type="text" v-model="meters" @focus="currentlyActiveField = 'meters'" v-copy="1111">
</div>
<p id="info"></p>    
<script>
const app = Vue.createApp({
    data() {
        return {
            kilometers: 0,
            meters: 0,
            currentlyActiveField: '',
            changeValue: '',
        }
    },
    watch: {
        kilometers(newValue) {
            if (this.currentlyActiveField === 'kilometers') { 
                this.meters = newValue * 1000;
            }
        },
        meters(newValue) {
            if (this.currentlyActiveField === 'meters') {
                this.kilometers = newValue / 1000;
            }
        }
    }
});
// 自定义复制指令
app.directive('copy', {
    beforeMount(el, binding) {
        el.addEventListener('click', () => {
            const textToCopy = binding.value; // 获取要复制的文本
            navigator.clipboard.writeText(textToCopy)
                .then(() => {
                    console.log('复制成功:', textToCopy);
                    alert('复制成功: ' + textToCopy); // 提示用户
                })
                .catch(err => {
                    console.error('复制失败:', err);
                });
        });
    },
    unmounted(el) {
        el.removeEventListener('click', this);
    }
});

const vm = app.mount('#app');
const info = document.getElementById("info")
console.log(app)
console.log(vm)
vm.$watch('kilometers',function (newValue, oldValue) {
    info.innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
    console.log(this, '111')
    this.changeValue =  newValue
});
</script>
</body>
</html>
